<template>
	<div>
		<div class="like-card display-row-center">
			<img :src="card_info.img[0]" class="card-img" />
			<div class="card-content">
				<div class="card-content-name display font-weight-500 font-size-16">
					<p class="font-size-16">{{ card_info.name }}</p>
					<p class="font-size-14 font-color-8C9198" style="line-height: .386473rem">x1</p>
				</div>
				<div class="card-content-intro display font-weight-500 font-size-12">
					<p class="font-size-14 font-color-8C9198" style="line-height: .386473rem" v-if="card_info.intro">{{ card_info.intro }}</p>
				</div>
				<div class="card-content-price">
					<span class="font-size-12">￥</span>
					<span class="font-size-20">{{ card_info.price }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'cardDeta',
	components: {},
	props: {
		card_info: {
			type: Object,
			default: () => {},
		},
	},
};
</script>

<style lang="scss" scoped>
.like-card {
	display: flex;
	border-radius: 0.144928rem;
	width: 100%;
	height: 2.318841rem;
	padding: .483092rem 0 .57971rem 0;

	.card-img {
		border-radius: 0.193237rem;
		width: 3.792271rem;
		height: 100%;
         object-fit: cover;
	}

	.card-content {
		width: 4.710145rem;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: .241546rem;

		.card-content-name {
			p {
				padding: 0;
				margin:  0;
			}
		}

		.card-content-intro {
			p {
				padding: 0;
				margin:  0;
			}
		}

		.card-content-price {
			span {
				color: #EC5C40;
			}
		}
	}
}
</style>
